<template>
  <div class="data">
    <div class="left">
      <ul>
        <li><span class="iconfont">&#xe651;</span></li>
        <li v-for="item in type">{{ item }}</li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li v-for="item in sp">
          <img :src="item.img" alt="" />
          <div class="sp">
            <p>{{ item.name }}</p>
            <div class="ys">
              <span>已售:{{ item.ys }}</span>
              <span>赞:{{ item.zan }}</span>
            </div>
          </div>
          <div class="jg">
            <span>￥{{ item.jg }}/杯</span>
            <div class="gm">
              <button @click="res(item.id)" class="res">-</button>
              <span>{{ item.gm }}</span>
              <button @click="add(item.id)" class="add">+</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="bot">
      <span :class="q > qs ? 'active' : ''" class="iconfont"
        >&#xe86e;<span :class="q > qs ? 'active' : ''">{{ gwc }}</span></span
      >
      <p>{{ qian }}</p>
      <span @click="dingdan()" :class="q > qs ? 'active' : ''">{{
        qison
      }}</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.active {
  background-color: rgb(22, 187, 250) !important;
  font-weight: bold;
  color: rgb(255, 255, 255) !important;
}
.data {
  width: 100%;
  display: flex;
  padding-bottom: 50px;
  .left {
    background-color: rgb(236, 236, 236);
    width: 25%;
    height: 585px;
    // background-color: red;
    ul {
      margin: 0;
      padding: 0;
      li {
        text-align: center;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        span {
          font-size: 25px;
        }
      }
    }
  }
  .right {
    width: 75%;
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        // background-color: red;
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
        img {
          width: 117px;
          height: 95px;
        }
        .sp {
          p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
            padding: 0;
            font-size: 16px;
          }
          .ys {
            margin-top: 5px;
            display: flex;
            span {
              font-size: 12px;
            }
          }
        }
        .jg {
          display: flex;
          padding-top: 10px;
          > span {
            color: red;
            font-weight: bold;
            font-size: 14px;
          }
          .gm {
            display: flex;
            margin-left: 5px;
            margin-top: 0px;
            button { 
              border: 1px solid rgb(22, 187, 250);
              text-align: center;
              line-height: 11px;
              margin: 0 4px;
            }
            span {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .bot {
    position: fixed;
    height: 50px;
    width: 90%;
    display: flex;
    bottom: 10px;
    border-radius: 30px;
    left: 20px;
    background-color: rgb(54, 54, 54);
    span:nth-child(1) {
      width: 50px;
      height: 50px;
      text-align: center;
      background-color: rgb(61, 61, 61);
      line-height: 50px;
      position: absolute;
      margin-top: -25px;
      border-radius: 50%;
      color: white;
      margin-left: 10px;
      span {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-left: -13px;
        margin-top: -13px;
      }
    }
    span:nth-of-type(2) {
      padding: 0;
      margin: 0;
      width: 30%;
      border-radius: 0 30px 30px 0;
      padding: 0 40px;
      text-align: center;
      color: #ccc;
      background-color: rgb(29, 29, 29);
      font-size: 16px;
      text-align: center;
      line-height: 50px;
    }
    p {
      padding: 0;
      margin: 0;
      width: 70%;
      padding-left: 10%;
      border-radius: 30px 0 0 30px;
      color: #ccc;
      font-size: 13px;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
<script>
var rig;
export default {
  name: "mcdata",
  data() {
    return {
      sj: {},
      sp: [],
      shangjiaid: 0,
      type: [],
      shangpinid: [],
      qian: "购物车空空如也",
      q: 0,
      qison: "",
      qison2: "",
      gwc: 0,
      qs: 8,
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.shangjiaid = this.$route.query.id;
    let _this2 = this;
    let pro = this.$http({
      method: "get",
      url: "/data.json",
      data: {},
    });
    pro.then(function (res) {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].id == id) {
          _this2.sj = res.data[i];
          _this2.sp = _this2.sj.shop;
          _this2.qs = _this2.sj.qs;
          _this2.qison = "￥" + _this2.sj.qs + "起送";
          _this2.qison2 = "￥" + _this2.sj.qs + "起送";
        }
      }
      for (let i = 0; i < _this2.sp.length; i++) {
        let is = true;
        for (let j in _this2.type) {
          if (_this2.sp[i].type == _this2.type[j]) {
            is = false;
          }
        }
        if (is) {
          _this2.type.push(_this2.sp[i].type);
        }
      }
    });
  },
  methods: {
    // 减少
    res(i) {
      if (this.gwc > 0) {
        this.gwc--;
        for (let j = 0; j < this.sp.length; j++) {
          if (this.sp[j].id == i) {
            this.qian -= this.sp[j].jg - 0;
            this.q -= this.sp[j].jg - 0;
            this.sp[i - 1].gm--;
          }
        }
      }
      if (this.gwc == 0) {
        this.qian = "购物车空空如也";
      }
      if (this.q > this.qs) {
        this.qison = "立刻下单";
      } else {
        this.qison = this.qison2;
      }
    },
    // 添加商品
    add(i) {
      this.gwc++;
      if (this.qian == "购物车空空如也") {
        this.qian = 0 - 0;
      }
      for (let j = 0; j < this.sp.length; j++) {
        if (this.sp[j].id == i) {
          this.qian += this.sp[j].jg - 0;
          this.q += this.sp[j].jg - 0;
          this.shangpinid.push(i);
          this.sp[i - 1].gm++;
        }
      }
      if (this.q > this.qs) {
        this.qison = "立刻下单";
      } else {
        this.qison = this.qison2;
      }
    },
    // 创建订单
    dingdan() {
      if (this.q > this.sj.qs) {
        let data = {
          shangjia: this.sj,
          shangpinid: this.shangpinid,
          jiage: this.q,
          time: new Date().getTime(),
          zhuangtai: "配送中",
          queren: "确认收获",
          quxiao: "取消订单",
        };
        data = JSON.stringify(data);
        for (let i = 0; i < 99; i++) {
          let name = "dingdan" + i;
          let shuju = localStorage.getItem(name);
          if (shuju == null) {
            localStorage.setItem(name, data);
            this.q = 0;
            this.qison = this.qison2;
            this.qian = "购物车空空如也";
            this.gwc = 0;
            this.shangpinid = [];
            for (let j = 0; j < this.sp.length; j++) {
              this.sp[j].gm = 0;
            }
            break;
          }
        }
      } else {
        return;
      }
      // localStorage.clear()
    },
  },
};
</script>